<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thylemeaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>注册账号</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/form.css" rel="stylesheet">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">


    <style>a:hover{text-decoration: none;}</style>



    <script type="text/javascript">
        var securityCode;

        //用户名判断
        function checkUsername() {
            var username = $("#username").val();
            var regexpUsername = /^[a-zA-Z0-9_\u4e00-\u9fa5]{4,16}$/;
            var judgement = regexpUsername.test(username);
            if (judgement) {
                $("#username").css("border", "1px solid green");
            } else
                $("#username").css("border", "1px solid red");
            return judgement;
        }

        //密码判断
        function checkPassword() {
            var password = $("#password").val();
            var regexpPassword = /^[a-zA-Z0-9_]{6,}$/;
            var judgement = regexpPassword.test(password);
            if (judgement) {
                if ($("#surePassword").val() == "")
                    $("#password").css("border", "1px solid green");
                else if ($("surePassword").val() != $("password").val()) {
                    $("#surePassword").css("border", "1px solid red");
                    $("#password").css("border", "1px solid green");
                } else {
                    $("#surePassword").css("border", "1px solid green");
                    $("#password").css("border", "1px solid green");
                }
            } else
                $("#password").css("border", "1px solid red");
            return judgement;
        }

        //确认密码
        function checkSurePassword() {
            var judgement = false;
            if ($("#password").val() == "") {
                $("#password").css("border", "1px solid red");
                $("#surePassword").css("border", "1px solid red");
            } else if ($("#surePassword").val() == "" && $("#password").val() != "")
                $("#surePassword").css("border", "1px solid red");
            else if ($("#surePassword").val() == $("#password").val()) {
                $("#surePassword").css("border", "1px solid green");
                judgement = true;
            } else
                $("#surePassword").css("border", "1px solid red");
            return judgement;
        }

        //手机号判断
        function checkTel() {
            var tel = $("#tel").val();
            var regexpPhome = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            var judgement = regexpPhome.test(tel);
            if (judgement)
                $("#tel").css("border", "1px solid green");
            else
                $("#tel").css("border", "1px solid red");
            return judgement;
        }

        //邮箱判断
        function checkEmail() {
            var email = $("#email").val();
            var regexpEmail = /^\w+@\w+\.\w+$/;
            var judgement = regexpEmail.test(email);
            if (judgement)
                $("#email").css("border", "1px solid green");
            else
                $("#email").css("border", "1px solid red");
            return judgement;
        }

        //出生日期判断
        function checkBirthday() {
            var judgement = false;
            var birthday = $("#birthday").val();
            if (birthday != "") {
                $("#birthday").css("border", "1px solid green");
                judgement = true;
            } else {
                $("#birthday").css("border", "1px solid red");
            }
            return judgement;
        }

        function checkCode1() {
            var Code = $("#securityCode").val();
            if (Code != "")
                return true;
            return false;
        }

        //更新图片
        function changeImg() {
            $("#showCode")[0].src = "code/create?" + new Date().getTime();
        }


        $(function () {

            $("#dis3")[0].style.display = "none";

            //文本框失去焦点,执行想对应事件
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#surePassword").blur(checkSurePassword);
            $("#email").blur(checkEmail);
            $("#tel").blur(checkTel);
            $("#birthday").blur(checkBirthday);

            $("#showCode").click(function(){
                changeImg();
            })


            //提交
            $("#form1").submit(function () {
                if (document.getElementById("userProtocol").checked && checkUsername() && checkPassword() && checkSurePassword() && checkTel() && checkEmail() && checkCode1()) {
                    var name = $("#username").val();
                    var password = $("#password").val();
                    var email = $("#email").val();
                    var phone = $("#tel").val();
                    var birthday = $("#birthday").val();
                    var checkCode = $("#securityCode").val();
                    var sex = "男";

                    var sendInfo = {
                        name: name,
                        password: password,
                        email: email,
                        phone: phone,
                        birthday: birthday,
                        checkCode: checkCode,
                        sex: sex
                    }

                    $.ajax({
                        // 编写json格式，设置属性和值
                        url: "user/register",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(sendInfo),
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            if (data.result == 1) {
                                window.location.href = "register_success.html";
                            } else {
                                layer.alert(data.msg);
                            }
                        }
                    });
                } else {
                    layer.alert("请同意协议并填写表单注册信息");
                    // alert("请同意协议并填写表单注册信息")
                }
                return false;
            });

        });
    </script>
</head>
<body background="img/background.jpg">

<div th:replace="header::#nav(activeUrl='register.html')"></div>

<div class="container">
    <div class="row">
<!--        <div class="col-sm-5 wz">您的位置：<a href="index02.html">首页</a>&gt;注册</div>-->
        <div>
        <ol class="breadcrumb">
            <li><a href="#">您的位置：</a></li>
            <li><a href="index02.html">首页</a></li>
            <li >注册</li>
        </ol>
        </div>
        <div class="col-xs-12" >
            <div class="layui-anim layui-anim-up col-md-6 col-xs-12 jumbotron">
                <div class="container">
                <h1>Hello, world!</h1>
                <p>我们的旅途，从现在开始</p>
                </div>
                <img src="img/register.jpg">
            </div>
            <div id="tableDiv" class="layui-anim layui-anim-up col-md-6 col-xs-12">
                <div>
                    <table id="table">
                        <form action="#" method="post" id="form1">
                            <tr>
                                <td class="tdLeft"><i class="layui-icon layui-icon-username" style="color: #40AFFE"></i> <label for="username">用户名:</label></td>
                                <td class="tdRight"><input type="text" id="username" name="username"
                                                           placeholder='用户名为4-16位且含有中,英,数和"_"'/></td>
                            </tr>
                            <tr>

                                <td class="tdLeft"><i class="layui-icon layui-icon-password" style="color: #40AFFE">   </i><label for="password">密码:</label></td>
                                <td class="tdRight"><input type="password" name="password" id="password"
                                                           placeholder='密码为至少6位且含有中,英,数和"_"'/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft"><i class="layui-icon layui-icon-password" style="color: #40AFFE">   </i><label for="surePassword">确认密码:</label></td>
                                <td class="tdRight"><input type="password" name="surePassword" id="surePassword"
                                                           placeholder="请再一次输入密码"/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft"><i class="layui-icon layui-icon-cellphone" style="color: #40AFFE"></i> <label for="tel">手机号:</label>
                                <td class="tdRight"><input type="text" name="tel" id="tel" placeholder="请输入手机号"/></td>
                            </tr>
                            <tr>
                                <td class="tdLeft"><label for="email"><i class="layui-icon layui-icon-email" style="color: #40AFFE">  </i>Email:</label></td>
                                <td class="tdRight"><input type="email" name="email" id="email" placeholder="请输入邮箱"/>
                                </td>

                            </tr>
                            <tr>
                                <td class="tdLeft"><i class="layui-icon layui-icon-date"style="color: #40AFFE">  </i><label for="birthday">出生日期:</label></td>
                                <td class="tdRight">
                                    <input type="text" name="birthday" placeholder="请选择日期" id="birthday"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdLeft"><i class="layui-icon layui-icon-vercode"style="color: #40AFFE">  </i><label for="securityCode">验证码:</label></td>
                                <td class="tdRight">
                                    <input type="text" id="securityCode" name="securityCode" placeholder="请输入验证码"/>
                                    <img class="showCode" id="showCode" src="code/create"></img>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="tdCenter"><input id="userProtocol" type="checkbox"/><label
                                        for="userProtocol">阅读并接受<a href="userProtocol.html" target="_blank"><span>《注册用户协议》</span></a></label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="tdCenter">
                                    <input type="submit" id="btn_submit" value="立即注册">
                                </td>
                            </tr>
                        </form>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./layui/layui.all.js"></script>
<script type="text/javascript">
    var aaa=layui.laydate;
    aaa.render({
        elem:"#birthday"
    });
</script>
</body>
</html>